<template>
  <div class="bg-white">
    <div class="lg:gap-10 flex flex-col gap-5 mx-auto max-w-7xl">
      <!-- 面包屑-->
      <div class="lg:px-0 flex justify-between p-4">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: localePath('/') }">
            <div class="flex items-center">
              <i class="el-icon-s-home mr-1 text-lg"></i>
            </div>
          </el-breadcrumb-item>
          <el-breadcrumb-item class="capitalize">
            {{ $t('pages.gamelist') }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 cursor-pointer" @click="showDialog = true">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>
      <!--  -->
      <!--  -->
      <!--  -->
      <div class="lg:px-0 grid grid-cols-4 gap-12 px-4">
        <div class="lg:flex hidden flex-col col-span-1 gap-4">
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <!-- 游戏平台 -->
          <LazyClassifyGame :showActive="false" :classify="classify" @targetClassify="changeTab" />
        </div>
        <div class="lg:col-span-3 flex flex-col col-span-4 gap-4">
          <!-- 热门游戏 -->
          <!-- 热门游戏 -->
          <!-- 热门游戏 -->
          <template v-if="page == 1">
            <h1 class="font-medium text-[1.25rem] text-[#121212] capitalize">
              {{ $t('pages.hotGame') }}
            </h1>
            <div class="lg:grid-cols-3 max-lg:overflow-x-auto max-lg:flex-nowrap max-lg:flex lg:grid gap-4 items-center">
              <nuxt-link
                :to="localePath(`/game/${i?.code || ''}`)"
                v-for="(i, k) in hotGameList"
                :key="k"
                class="group max-lg:w-3/5 flex flex-col flex-none gap-1 cursor-pointer"
              >
                {{ i?.category?.code }}
                <div class="rounded-[0.75rem] w-full aspect-video overflow-hidden relative">
                  <img
                    loading="lazy"
                    :title="i.title + ' - Game cover'"
                    :alt="i.title + ' - Game thumbnail'"
                    :src="$globalFn.imgPrefixUrl(i.image, 'goods_thumb_1_1')"
                    class="size-full group-hover:scale-110 object-cover bg-gray-200 duration-300"
                  />
                  <div class="flex absolute bottom-0 left-0 justify-between p-2 w-full bg-gradient-to-b from-transparent to-black">
                    <div class="flex gap-1 items-center text-white">
                      <span class="text-[0.75rem]">
                        {{ i?.region?.name }}
                      </span>
                      <span class="text-[0.75rem]">/</span>
                      <span class="text-[0.75rem]">
                        {{ i?.language }}
                      </span>
                    </div>
                    <div class="flex gap-1 items-center">
                      <img
                        :src="$globalFn.imgPrefixUrl(i.pic_image)"
                        v-for="(i, k) in i.category"
                        :key="k"
                        class="size-4 brightness-[90] object-cover"
                        :alt="'Game category icon ' + (k + 1)"
                        :title="'Game category indicator ' + (k + 1)"
                        loading="lazy"
                      />
                    </div>
                  </div>
                </div>
                <div class="font-semibold lg:text-[1.25rem] text-[1rem] text-[#121212] line-clamp-1">
                  {{ i.title || '' }}
                </div>
                <p class="font-normal text-[0.75rem] text-[#121212] line-clamp-3">
                  {{ i?.description || '' }}
                </p>
              </nuxt-link>
            </div>
          </template>
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <!-- 全部游戏 -->
          <!-- <h2
            class="font-medium text-[1.25rem] text-[#121212] lg:mt-8 capitalize"
          >
            {{ $t("pages.allgames") }}
          </h2> -->
          <div class="lg:grid-cols-5 lg:gap-9 grid grid-cols-2 gap-4 mt-4">
            <nuxt-link
              v-for="item in gameList"
              :key="item.id"
              :to="localePath(`/game/${item?.code || ''}`)"
              class="group flex flex-col gap-1 cursor-pointer"
            >
              <div class="w-full rounded-[0.75rem] bgg p-1">
                <div class="rounded-[0.75rem] size-full aspect-[6/8] overflow-hidden border">
                  <img
                    :src="$globalFn.imgPrefixUrl(item.image || '', 'goods_thumb_3_4')"
                    :title="`${item.title} - Game cover`"
                    :alt="`${item.title} - Game thumbnail`"
                    loading="lazy"
                    class="size-full group-hover:scale-110 bg-gray-200 duration-300"
                  />
                </div>
              </div>
              <h3 class="font-medium text-[0.75rem] text-[#121212] line-clamp-2">
                {{ item.title }}
              </h3>
              <div class="flex items-center gap-1 font-normal text-[0.75rem] text-[#666666]">
                <p class="">
                  {{ item.region.name || '' }}
                </p>
                <p>/</p>
                <p class="">
                  {{ item.language || '' }}
                </p>
              </div>
            </nuxt-link>
          </div>
          <Paging :total="total" :page.sync="page" :limit.sync="size" @change="handlePageChange" :current-query="$route.query"> </Paging>
        </div>
      </div>
    </div>
    <!-- 弹框组件 -->
    <!-- 弹框组件 -->
    <!-- 弹框组件 -->
    <LazyH5Dialog :showDialog="showDialog" :title="$t('pages.classification')">
      <LazyClassifyGame :showActive="false" :classify="classify" @targetClassify="changeTab" />
    </LazyH5Dialog>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'gameList',
    head() {
      return {
        title: this.goods_category.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.goods_category.seo_description
          }
        ]
      }
    },
    data() {
      return {
        classify: null, // 分类数据
        page: 1, // 当前页码
        size: 20, // 每页显示数量
        loading: true, // 加载状态
        gameList: [], // 游戏列表
        hotGameList: [], // 热门游戏列表
        showDialog: false, // 对话框显示状态
        total: 0, // 总数量
        detailInfo: {}
      }
    },
    created() {},
    async asyncData({ app, query }) {
      // 并发请求获取分类、游戏列表和热门游戏数据
      const [categories, games, hotGames, goods_category] = await Promise.all([
        app.$axios.get('/api/goods_category/index?type=0'),
        app.$axios.get('/api/game/index', {
          params: {
            page: query.page || 1,
            limit: 20,
            paginate: 1
          }
        }),
        app.$axios.get('/api/game/index?is_hot=1&page=1&limit=3'),
        app.$axios.get('/api/goods_category/read', {
          params: {
            code: 'game'
          }
        })
        // app.$axios.get(`/api/game/read?code=game`)
      ])
      //
      return {
        // detailInfo,
        goods_category,
        classify: categories,
        gameList: games.data,
        total: games.total,
        hotGameList: hotGames || [],
        page: query.page || 1
      }
    },
    methods: {
      // 处理分页切换，更新页码并重新获取游戏列表数据
      async handlePageChange({ page, currentQuery }) {
        this.loading = true
        this.page = currentQuery || page
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        await this.getGameList()
      },
      // 从API获取游戏列表数据，更新到组件状态中
      async getGameList() {
        try {
          const { data, total } = await this.$axios.get('/api/game/index', {
            params: {
              page: this.page,
              limit: this.size,
              paginate: 1
            }
          })
          this.gameList = data
          this.total = total
        } catch (err) {
          console.error('获取游戏列表失败:', err)
        } finally {
          this.loading = false
        }
      },
      // 切换游戏平台分类，跳转到对应平台页面
      changeTab(item) {
        this.$router.push({
          path: this.localePath(`/game/platform/${item.id}`)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
